<template>
    <div class="my_page" ref="myPage">
        <div class="my_content">
            <div class="user-state-info" :style="{opacity:valueOfOpacity}">
                <div class="user-img">
                    <img v-if="!userPic" src="../img/icon/user.png">
                    <img :src="userPic">
                    {{userPlaylist.data}}
                </div>
                <div class="user-desc" @click="openLoginLayer">
                    <p class="user-text">{{nickName}}<i class="iconfont"></i></p>
                    <span v-if="userDetail.data" class="user-level">Lv.{{userDetail.data.level}}</span>
                </div>
            </div>
            <div class="music-application">
                <ul class="app_content">
                    <li class="app_content_item">
                        <div class="app_content_item_img">
                            <img src="../img/icon/my/download.png">
                        </div>
                        <p>本地/下载</p>
                    </li>
                    <li class="app_content_item">
                        <div class="app_content_item_img">
                            <img src="../img/icon/my/upload.png">
                        </div>
                        <p>云盘</p>
                    </li>
                    <li class="app_content_item">
                        <div class="app_content_item_img">
                            <img src="../img/icon/my/buy.png">
                        </div>
                        <p>已购</p>
                    </li>
                    <li class="app_content_item">
                        <div class="app_content_item_img">
                            <img src="../img/icon/my/recent.png">
                        </div>
                        <p>最近播放</p>
                    </li>
                    <li class="app_content_item">
                        <div class="app_content_item_img">
                            <img src="../img/icon/my/friend.png">
                        </div>
                        <p>我的好友</p>
                    </li>
                    <li class="app_content_item">
                        <div class="app_content_item_img">
                            <img src="../img/icon/my/collection.png">
                        </div>
                        <p>收藏和赞</p>
                    </li>
                    <li class="app_content_item">
                        <div class="app_content_item_img">
                            <img src="../img/icon/my/myPodcast.png">
                        </div>
                        <p>我的播客</p>
                    </li>
                    <li class="app_content_item">
                        <div class="app_content_item_img">
                            <img src="../img/icon/my/add.png">
                        </div>
                        <p>音乐应用</p>
                    </li>
                </ul>
            </div>
            <div class="favorite-music" v-if="userPlaylist.data">
                <playlistitem>
                    <img :src="userPlaylist.data.playlist[0].coverImgUrl">
                    <span slot="mainT">{{userPlaylist.data?userPlaylist.data.playlist[0].name:"我喜欢的音乐"}}</span>
                    <span slot="subT">{{userPlaylist.data.playlist[0].trackCount}}首</span>
                    <div class="cardiac_mode" slot="right">
                        <div class="cardiac_mode_img">
                            <img src="../img/icon/my/cardiac.png">
                        </div>
                        <p class="cardiac_mode_title">心动模式</p>
                    </div>
                </playlistitem>
            </div>
            <div class="playlistTab">
                <div :class="[,{stopThere:isScrollRun,my_playlists_tab:true}]">
                    <slidetab>
                        <ssitem>
                            <p id="A" @click="scrollAnimate(381)">创建歌单</p>
                        </ssitem>
                        <ssitem>
                            <p id="B" @click="scrollAnimate(904)">收藏歌单</p>
                        </ssitem>
                    </slidetab>
                    <span class="nowTab"></span>
                </div>
            </div>
            <div class="my-playlists">
                <div class="create_playlist">
                    <myplaylist>
                        <p slot="title">创建歌单({{userPlaylistCount.data?userPlaylistCount.data.createdPlaylistCount:1 - 1}})个</p>
                        <img slot="add" src="../img/icon/my/playlist/add.png">
                        <img slot="more" src="../img/icon/my/playlist/more.png">
                        <playlistitem slot="content" v-for="(item,index) in favoriteMusic" :key="index">
                            <img v-lazy="item.coverImgUrl">
                            <span slot="mainT">{{item.name}}</span>
                            <span slot="subT">{{item.trackCount}}首</span>
                            <div class="header-more" slot="right">
                                <img src="../img/icon/my/playlist/more.png">
                            </div>
                        </playlistitem>
                    </myplaylist>
                </div>
                <div class="collect_playlist">
                    <myplaylist>
                        <p slot="title">收藏歌单({{userPlaylistCount.data?userPlaylistCount.data.subPlaylistCount:0}})个</p>
                        <img slot="more" src="../img/icon/my/playlist/more.png">
                        <playlistitem slot="content" v-for="(item,index) in collectedMusic" :key="index">
                            <img v-lazy="item.coverImgUrl">
                            <span slot="mainT">{{item.name}}</span>
                            <span slot="subT">{{item.trackCount}}首，by{{item.creator.nickname}}</span>
                            <div class="header-more" slot="right">
                                <img src="../img/icon/my/playlist/more.png">
                            </div>
                        </playlistitem>
                    </myplaylist>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import slidetab from "../component/slideTab.vue";
    import ssitem from "../component/ssItem.vue";
    import myplaylist from "../component/myPlaylist.vue";
    import playlistitem from "../component/playlistItem.vue";
    import {request} from "../js/request.js";
    export default {
        components:{
            slidetab,
            ssitem,
            myplaylist,
            playlistitem,
        },
        computed:{
            favoriteMusic(){
                let arrs = [];
                if(this.userPlaylist.data){
                    for(var item of this.userPlaylist.data.playlist){
                        if(item.userId == this.userId){
                            arrs.push(item);
                        }
                    }
                }
               return arrs;
            },
            collectedMusic(){
                let arrs = [];
                if(this.userPlaylist.data){
                    for(var item of this.userPlaylist.data.playlist){
                        if(item.userId !== this.userId){
                            arrs.push(item);
                        }
                    }
                }
               return arrs;
            }
        },
        data(){
            return {
                nickName:"登录",
                userId:"",
                userPic:"",
                tabSelected:"tabSelected",
                loginState:{url:"/login/status?cookie=",data:""},
                userDetail:{url:"/user/detail?uid=",data:""},
                userPlaylist:{url:"/user/playlist?uid=",data:""},
                userPlaylistCount:{url:"/user/subcount?cookie=",data:""},
                isOpen:true,
                isScrollRun:false,
                valueOfOpacity:1
            }
        },
        mounted(){
            let a = request({url:this.loginState.url + this.getCookie('token') + "&tampTime" + new Date()}).then(value=>{
                this.loginState.data = value;
                if(value.data.profile){
                    this.isOpen = false;
                    this.userId = value.data.profile.userId;
                    this.nickName = value.data.profile.nickname;
                    this.userPic = value.data.profile.avatarUrl;
                }
                if(value.data.account){
                    request({url:this.userDetail.url + this.loginState.data.data.account.id}).then(val=>{
                        this.userDetail.data = val;
                    })
                    request({url:this.userPlaylist.url + this.loginState.data.data.account.id}).then(value=>{
                        this.userPlaylist.data = value
                        console.log(this.userPlaylist);
                    })
                }
            })
            request({url:this.userPlaylistCount.url + this.getCookie('token')}).then(value=>{
                this.userPlaylistCount.data = value;
            })
            this.$refs.myPage.addEventListener('scroll',this.handleScroll);
        },
        methods:{
            getCookie(name){
                var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
                if(arr=document.cookie.match(reg))
                    return unescape(arr[2]);
                else
                    return null;
            },
            openLoginLayer(){
                if(this.isOpen){
                    this.$bus.emit('switchLoginLayer',true);
                }
            },
            handleScroll(){
                if(this.$refs.myPage.scrollTop > 380){
                    this.isScrollRun = true;
                }else{
                    this.isScrollRun = false;
                }
                if(this.$refs.myPage.scrollTop > 45){
                    this.$bus.emit('isUserDetailHide',false);
                    this.valueOfOpacity = 0;
                }else{
                    this.$bus.emit('isUserDetailHide',true);
                    this.valueOfOpacity = 1;
                }
            },
            scrollAnimate(value){
                let nowStep = this.$refs.myPage.scrollTop;
                let distance = value - nowStep;
                let speed = 10;
                let flag = true;
                if(distance > 1){
                    let timer = setInterval(()=>{
                        this.$refs.myPage.scrollTop+=speed;
                        if(value - this.$refs.myPage.scrollTop <= 0){
                            clearInterval(timer);
                        }
                    },1)
                }
                if(distance < 1){
                    let timer = setInterval(()=>{
                        this.$refs.myPage.scrollTop-=speed;
                        if(value - this.$refs.myPage.scrollTop >= 0){
                            clearInterval(timer);
                        }
                    },1)
                }
            }
        }
    }
</script>